<template>
  <div class="about">
    <at-button v-if="debug" @click="showData(chartData)"> <i class="icon icon-align-center" />  this page data </at-button>
    <div id="myChart213"></div>
     <input
      class="hdbtn"
      type="button"
      id="btn888"
      @click="downloadImpByChart()"
      value="保存为图片"
    />
  </div>
</template>
<style scoped>
.about {
  padding-top: 2rem;
}
#myChart213 {
   margin: 0 auto;
   width: 690px;
  height: 890px;
}
</style>
<script>
import mapdata from "../../assets/json/data-xh.json";
import {mapState,mapMutations} from 'vuex'
export default {
  name: "hello",
  data() {
    return {
      chartData:[],
    };
  },
  computed:{
    ...mapState(['cookies','debug'])
  },
  mounted() {
    this.updateCookies()
    this.chartData = this.cookies.chart213.data
    this.drawLine();
  },
  methods: {
    ...mapMutations(["updateCookies"]),
    drawLine() {
      let myChart213 = this.$echarts.init(document.getElementById("myChart213"));
      // myChart213.showLoading();
      // let index = -1;
      myChart213.on("mouseout", function(e) {
        // clearInterval(timer);
        myChart213.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: e.dataIndex
        }); //鼠标移出后先把上次的高亮取消
      });
      this.$echarts.registerMap("xihuqu", mapdata);
      myChart213.hideLoading();
      var option = {
        // backgroundColor: "#020933",
        title: {
          top: 0,
          text: this.cookies.chart213.title,
          subtext: "",
          x: "center",
          textStyle: {
            color: "#000",
            fontSize:'26',
            fontFamily:'FZXBSJW'
          }
        },
        dataRange: {
           x: "60%",
          y: "7%",
          splitList: [
            { start: 1, end: 3, label: "总量1-3名", color: "#EE4000" },
            { start: 4, end: 6, label: "总量4-6名", color: "yellow" },
            { start: 7, end: 11, label: "总量7-11名", color: "green" }
          ]
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {
        //       type:'png'
        //     }
        //   }
        // },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            // console.log(params);
            return params.name + ":名次 " + params.value+'<br/>总量:'+params.data.totalNum;
          }
        },
        geo: {
          map: "xihuqu",
          // aspectScale:0.6, //长宽比
          zoom: 1.1,
          // roam: false,
          itemStyle: {
            normal: {
              // areaColor: "#013C62",
              // shadowColor: "#182f68",
              // shadowOffsetX: 10,
              // shadowOffsetY: 30
            },
            emphasis: {
              // areaColor: "#2AB8FF",
              // borderWidth: 1,
              // color: "green",
              label: {
                show: false
              }
            }
          }
        },
        series: [
          {
            type: "map",
            roam: false,
             label: {
              normal: {
                show: true,
                textStyle: {
                  // color: "#fff", // 镇街字体颜色
                  fontFamily: "黑体",
                  fontWeight: 'bold',
                  fontSize:'15',
                }
              },
              emphasis: {
                textStyle: {
                  color: "#000"
                }
              }
            },

            itemStyle: {
              normal: {
                // borderColor: "#778899",
                borderWidth: 1.5,
                areaColor: "#12235c"
              },
              emphasis: {
                areaColor: "#2AB8FF",
                borderWidth: 0,
                color: "green"
              }
            },
            zoom: 1.1,
            // roam: false,
            map: "xihuqu", //使用
            data: this.chartData
               //热力图数据   不同区域 不同的底色
          }
        ]
      };
      myChart213.setOption(option);
    },
    showData(jsondata){
      this.$Modal.alert({content:jsondata});
    },

    downloadImpByChart(){
      this.common.saveChart(this.$echarts.getInstanceByDom(document.getElementById('myChart213')),this.cookies.chart213.title)
    }
  }
};
</script>